// 1. 导入 index.vue Message组件
// 2. 封装并导出 message函数
//     message({type: '', text:'' }) 等价于动态创建Message组件，实现弹框提示的效果
// 3. 用 createVNode 将 导入的Message组件 生成 vnode
// 4. 用 render 将vnode 渲染到 真实的 dom
// 5. 把 真实的 dom 添加到页面上

import XtxMessage from './index.vue'
import { createVNode, render } from 'vue'

export function Message ({ type, text }) {
  // 1. 用 createVNode 将 导入的Message组件 生成 vnode
  // createVNode(XtxMessage, XtxMessage组件的props)
  const vnode = createVNode(XtxMessage, { type, text })

  // 2. 用 render 将vnode 渲染到 真实的 dom
  const div = document.createElement('div')
  render(vnode, div)

  // 3. 把 真实的 dom 添加到页面上
  document.body.appendChild(div)

  // 4. 显示 1s之后，消失
  setTimeout(() => {
    // 方法一：移除
    // document.body.removeChild(div)
    // 方法二： 填充空内容
    render(null, div)
  }, 1000)
}
